{extend name="public/layout" /}
{block name="head_css"}
    <link rel="stylesheet" href="/static/index/css/header.css?v={$version}">
    <link rel="stylesheet" href="/static/index/css/video_pic_index.css?v={$version}">
    <style>
        .sort-box {
            box-sizing: border-box;
            padding: .3rem;
            font-size: 0;
        }

        .sort-box .sitem {
            width: 20%;
            display: inline-block;
            vertical-align: middle;
            text-align: center;
        }

        .sort-box .sitem>a,.sort-box .sitem>a:link,.sort-box .sitem>a:active {
            font-size: .9rem;
            color: #333;
            padding: .1rem .3rem;
            text-decoration: none;
            border: #fff solid 1px;
        }
        .sort-box .sitem.chosen>a {
            border-color: #333;
        }
        .btn{
            display: inline-block;
            width: 100%;
            height: 2rem;
            box-sizing: border-box;
            background-color: #ff7200;
            font-size: 0.8rem;
            color: #fff;
            text-align: center;
            border-radius: 0.2rem;
        }
    </style>
{/block}

{block name="main"}
    <div class="container sam-header">
        <div class="back">
            <a href="{:url('user/index')}">
                <div class="arrow"></div>
            </a>
        </div>
        <div class="name">{$title}</div>
    </div>

    <div class="container sam-white-bg sort-box">
        <div class="sitem {if condition="$order eq '1'"}chosen{/if}">
            <a href="{:url('engineering/my_list',array('order'=>'1'))}">隔音材料</a>
        </div>
        <div class="sitem {if condition="$order eq '2'"}chosen{/if}">
            <a href="{:url('engineering/my_list',array('order'=>'2'))}">声学安装</a>
        </div>
        <div class="sitem {if condition="$order eq '3'"}chosen{/if}">
            <a href="{:url('engineering/my_list',array('order'=>'3'))}">声学设计</a>
        </div>
        <div class="sitem chosen">
            <a href="{:url('pic/my_list')}">秀图</a>
        </div>
        <div class="sitem">
            <a href="{:url('video/my_list')}">声学小视频</a>
        </div>
    </div>

    <div class="container">
        <div class="list-box row">
            {foreach name="list" item="item"}
                <a onclick="go_update({$item.id})" class="pic-item">
                    <div class="pic-item-container">
                        <div class="img-container">
                            <img src="{$item.img}">
                        </div>
                        <div class="pic-item-text">
                            <div style="display: flex">
                                <div class="icon-text view">
                                    <div class="icon"></div>
                                    <div class="text">{$item.pv}</div>
                                </div>
                                <div class="icon-text like">
                                    <div class="icon"></div>
                                    <div class="text">{$item.like_num}</div>
                                </div>
                                <div class="icon-text tag">
                                    <div class="icon"></div>
                                    <div class="text">{$item.comment_num}</div>
                                </div>
                            </div>
                            <div class="title">{$item.detail}</div>
                        </div>
                        <div class="pic-item-text">
                            <button data-id="{$item.id}" type="button" class="del_btn btn">删除</button>
                        </div>
                    </div>
                </a>
            {/foreach}
        </div>
    </div>
    {if condition="$list_end eq 0"}
        <div class="load-box">
            <div class="licon"></div>
            <div class="ltips">正在加载列表</div>
        </div>
    {/if}
{/block}
{block name="footer"}
{/block}
{block name="script"}
    <script>
        $('.del_btn').click(function(e){
            if(confirm('确定删除该信息吗？')){
                var url = '{:url('delete')}';
                var obj = new Object();
                obj.id = $(this).attr('data-id');
                $.post(url,obj,function(data) {
                    if(data.code == 1){
                        alert('删除成功');
                        window.location.reload();
                    }else{
                        alert('删除失败');
                    }
                })
            }
            e.stopPropagation();
        });
        function go_update(id){
            window.location.href = '{:url('add')}?id='+id;
        }
        {if condition="$list_end eq 0"}
        var loadHeight = $('.load-box').height();
        var windowHeight = $(window).height();
        var scTop = 0;
        var ajaxLoading = false;
        var is_end = false;
        var page = 2;
        $(window).scroll(function(e) {
            if($(window).scrollTop() - scTop > 0&&($(window).scrollTop() + windowHeight >= $(document).height() - loadHeight)&&!ajaxLoading && is_end == false) {
                $.ajax({
                    url: '{:url("my_list")}?page='+page,
                    method: 'get',
                    dataType: 'json',
                    beforeSend: function() {
                        ajaxLoading = true;
                    },
                    success: function (res) {
                        page = res.data.page;
                        if(res.data.is_end == 1){
                            is_end = true;
                            $('.load-box').each(function(){
                                $(this).remove();
                            });
                        }
                        $('.list-box').append(res.data.content);
                        ajaxLoading = false;
                    },
                    error: function (xhr,status,error) {
                        alert('网络错误');
                    },
                });
                scTop = $(window).scrollTop();
            }
            scTop = $(window).scrollTop();
        });
        {/if}
    </script>
{/block}
